<template>
  <div class="formClass hibaoForm">
    <el-form ref="ruleForm" v-loading="loading" :inline="true" size="mini">
      <div class="position-height">
        <table>
          <tr>
            <td>
              <el-form-item label="导出类型:">
                <el-select v-model="exportType" popper-class="popperClass" filterable placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </td>
            <td />
          </tr>
        </table>
        <el-table ref="table" :data="tableData" stripe border border height="400" class="innerTable">
          <el-table-column label="字段名称" align="center">
            <template slot-scope="{row}">
              {{ row.label }}
            </template>
          </el-table-column>
          <el-table-column label="是否导出" align="center">
            <template slot-scope="{row}">
              <el-switch
                v-model="row.export"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="row.disabled"
                @change="switchChange(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="导出顺序" align="center">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-top" circle :disabled="scope.$index==0" @click.stop="clickUp(scope.$index)" />
              <el-button type="warning" icon="el-icon-bottom" circle style="margin-left: 20px" :disabled="scope.$index==tableData.length-1" @click.stop="clickDowm(scope.$index)" />
            </template>
          </el-table-column>

        </el-table>
      </div>
      <el-form-item class="bottom-btns add-absolute">
        <el-button type="red" @click.stop="save">保存</el-button>
        <el-button type="cancel" @click.stop="cancel">取消</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
import { Button } from '@/components/Elements' // 要用到的组件
import { savePageSetting } from '@/api/common/systemSet' // api
import { mapGetters } from 'vuex'
export default {
  name: 'ExportSetting',
  components: { Button },
  props: {
    // 自动添加一个key为layerid的值， 该值为创建层的id
    layerid: {
      type: String,
      default: ''
    },
    // 国际化前缀，也是页面唯一标识pageId
    prefix: {
      type: String,
      default: ''
    },
    // 导出设置对象，包括exportType和exportColumns
    exportObject: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters([
      'uId', 'name'
    ])
  },
  data() {
    return {
      exportType: 'xlsx',
      options1: [
        { value: 'xlsx' },
        { value: 'xls' },
        { value: 'csv' },
        { value: 'txt' }
      ],
      tableData: [],
      loading: false
    }
  },
  mounted() {
    this.$store.commit('app/SET_LAYERID', this.layerid)
    this.handleRow().then(res => {
      this.tableData = res
    })
  },
  methods: {
    // 重置按钮
    reset() {
    },
    save() {
      this.loading = true
      const saveData = {}
      const exportSetting = {
        exportType: this.exportType,
        exportColumns: this.tableData
      }
      saveData.exportSetting = JSON.stringify(exportSetting)
      saveData.pageId = this.prefix
      saveData.bandUserId = this.uId
      saveData.createUserName = this.name
      saveData.createUser = this.uId
      saveData.lastUpdateUser = this.uId
      // 保存页面设置
      savePageSetting(saveData).then(res => {
        if (res && res.result === 'success') {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 1000
          })
          this.loading = false
          this.$layer.close(this.layerid) // 关闭弹框
          this.$parent.initPageSetting() // 调用父组件的刷新方法
        }
      })
    },
    // 向上移动一行
    clickUp(index) {
      // tableData里，当前 index 的值 与 index-1 的值交换
      const cacheData1 = this.tableData[index]
      const cacheData2 = this.tableData[index - 1]
      // 使用 $set 方法，可以在修改数组时，让VUE监听到数组的变化
      // https://cn.vuejs.org/v2/guide/reactivity.html#对于数组
      this.$set(this.tableData, index, cacheData2)
      this.$set(this.tableData, index - 1, cacheData1)
    },
    // 向下移动一行
    clickDowm(index) {
      // tableData里，当前 index 的值 与 index+1 的值交换
      const cacheData1 = this.tableData[index]
      const cacheData2 = this.tableData[index + 1]
      // 使用 $set 方法，可以在修改数组时，让VUE监听到数组的变化
      // https://cn.vuejs.org/v2/guide/reactivity.html#对于数组
      this.$set(this.tableData, index, cacheData2)
      this.$set(this.tableData, index + 1, cacheData1)
    },
    // 是否显示选择框改变触发
    switchChange(row) {
    },
    // 处理传过来的行数据
    handleRow() {
      return new Promise((resolve, reject) => {
        const resData = []
        const cacheData = this.exportObject.exportColumns
        // 补全columns中缺失的字段
        cacheData.forEach(item => {
          if (typeof (item.export) === 'undefined') { item.export = true }
          resData.push(item)
        })
        this.exportType = this.exportObject.exportType
        resolve(resData)
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style scoped>
  .el-radio.is-bordered.is-checked{
    border-color:#8f0000
  }
  .tableClass >>> table{
    margin-top: 0px;
  }
  .widthClass >>> input{
    /*border: 0px;*/
    background-color: unset;
    text-align: center;
  }
  .formClass .innerTable >>> .el-button{
    padding: 7px;
  }
</style>
